<template>
	<view class="suggestion-list" v-if="radioSearchStore.filteredList.length">
		<scroll-view scroll-y class="scroll-area" @scrolltolower="radioSearchStore.loadMore">
			<view v-for="(item, index) in SuggestionList" :key="index" class="suggestion-item"
				@click="handleClick(item)">
				<SafeImage :src="item.favicon" class="icon" mode="aspectFit" />
				<text class="name">{{ item.name }}</text>
			</view>
			<view v-if="radioSearchStore.isLoading" class="suggestion-item loading-indicator">
				<view class="loading-spinner"></view>
				<text class="name">加载中...</text>
			</view>
			<view class="suggestion-item no-more" v-if="!radioSearchStore.hasMore">
				<text class="name">没有更多了</text>
			</view>
		</scroll-view>
	</view>
</template>

<script setup lang="ts">
import type { Station } from '@/common/types/interface';
import SafeImage from '../SafeImage/SafeImage.vue';
import { useRadioSearchStore } from '@/stores/useRadioSearchStore';
import { usePlayerStore } from '@/stores/usePlayerStore';

import { computed } from 'vue';
const radioSearchStore = useRadioSearchStore();
const playerStore = usePlayerStore();
const SuggestionList = computed(() => radioSearchStore.filteredList);

const handleClick = (item: Station) => {
	playerStore.switchStation(item);
	radioSearchStore.clearResults();
};
</script>

<style scoped>
.suggestion-list {
	width: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	padding: 10rpx 30rpx;
	z-index: 99;
}

.scroll-area {
	max-height: 800rpx;
	/* 或根据页面布局设置 */
	overflow-y: scroll;
}

.suggestion-item {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 20rpx 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.icon {
	width: 40rpx;
	height: 40rpx;
	border-radius: 8rpx;
	/* background-color: rgba(255, 255, 255, 0.1); */
}

.name {
	font-size: 32rpx;
	color: #fff;
}

.loading-indicator {
	justify-content: center;
	align-items: center;
	background-color: rgba(255, 255, 255, 0.05);
	animation: pulse 1.5s infinite;
}

.loading-spinner {
	width: 40rpx;
	height: 40rpx;
	border: 4rpx solid #d502ff;
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.5;
	}
}

.no-more {
	color: gray;
}
</style>